<template>
    <div class="user">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">用户列表</a></el-breadcrumb-item>
      </el-breadcrumb>
      <template>
        <el-table
          :data="userform"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
          >
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="username"
            label="用户名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="mobile"
            label="电话"
            width="180">
          </el-table-column>
          <el-table-column
            prop="isDelete"
            label="状态">
            <template slot-scope="scope">
              <span>{{scope.row.isDelete | IsStartformat }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="danger"
                plain
                @click="handleupdate(scope.$index, scope.row)"
                v-if="scope.row.isDelete === 0 ? false : true "
                >禁用</el-button>
              <el-button
                type="success"
                plain
                v-if="scope.row.isDelete === 1 ? false : true "
                @click="handleupdate(scope.$index, scope.row)">启动</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
</template>

<script>
import { selectUser, updateUser } from '@/api'
export default {
  data () {
    return {
      page: 1,
      pageSize: 10,
      userform: [],
      isStatus: 0
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      selectUser({page: this.page, pageSize: this.pageSize}).then(res => {
        // console.log(res)
        this.userform = res.data.rows
      })
    },
    // 是否选中
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 是否禁用
    handleupdate (index, row) {
      row.isDelete === 0 ? this.isStatus = 1 : this.isStatus = 0
      row.isDelete = this.isStatus
      updateUser({id: row.id, isDelete: row.isDelete}).then(res => {
        if (res.data.success) {
          this.$message({
            message: '更新成功',
            type: 'success'
          })
          this.init()
        } else {
          this.$message({
            message: res.data.message,
            type: 'warning'
          })
          this.init()
        }
      })
    }
  },
  filters: {
    IsStartformat (num) {
      if (num === 1) {
        return '已启动'
      } else if (num === 0) {
        return '已禁用'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-breadcrumb{
  line-height: 45px;
  font-size: 16px;
}
</style>
